<template>
  <div>
    <el-col>
        <div>
          <el-button type="text" icon="el-icon-edit" size="mini">编辑</el-button>
          <!--<el-button type="primary" icon="el-icon-share" size="mini">共享</el-button>-->
          <el-button type="text" icon="el-icon-delete" size="mini" @click="rem()">删除</el-button>
          <el-button type="text" icon="el-icon-plus" size="mini" @click="table.dialogVisible.addVisible = true">添加</el-button>
          <el-button type="text" icon="el-icon-tickets" size="mini" @click="showAuth()">授权</el-button>
          <!--<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>-->
          <!--<el-button type="primary" size="mini">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
          <el-table
            :data="table.tableData"
            small
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column align="center" type="selection"  width="40">
            </el-table-column>
            <el-table-column align="center" type="index"  width="50">
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="code" label="code" width="100">
              <template slot-scope="scope">
                {{ scope.row.code }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            small
            @current-change="handleCurrentChange"
            :current-page.sync="table.pagination.currentPage"
            :page-sizes.sync="table.pagination.pageSizes"
            :page-size.sync="table.pagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total.sync="table.pagination.total" style="text-align: right">
          </el-pagination>
          <el-dialog title="添加" :visible.sync="table.dialogVisible.addVisible" width="40%">
            <el-form ref="add" label-width="80px" size="mini" width="70%">
              <el-form-item label="code">
                <el-input v-model="table.addFields.code"></el-input>
              </el-form-item>
              <el-form-item label="name">
                <el-input v-model="table.addFields.name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table.dialogVisible.addVisible = false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="编辑"
            :visible.sync="table.dialogVisible.editVisible"
            width="40%"
            ref="edit">
            <span>这是一段编辑信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table.dialogVisible.editVisible = false">取 消</el-button>
              <el-button type="primary" @click="table.dialogVisible.editVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="授权"
            :visible.sync="table.dialogVisible.authVisible"
            width="40%">
            <div>
              <el-tree
                :data="tree.treeData"
                show-checkbox
                ref="tree"
                node-key="id"
                :props="tree.defaultProps">
              </el-tree>

            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="text" @click="table.dialogVisible.authVisible = false">取 消</el-button>
              <el-button type="text" @click="getAuth()">获取角色权限</el-button>
              <el-button type="text" @click="getCheckedNodes()">确 定</el-button>
            </span>
          </el-dialog>
        </div>
    </el-col>
  </div>
</template>

<script>
import {fetch, post, del} from '@/utils/http'
export default {
  data () {
    return {
      table: {
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSizes: [5, 10, 15],
          pageSize: 5,
          total: 20
        },
        dialogVisible: {
          addVisible: false,
          editVisible: false,
          authVisible: false
        },
        addFields: {
          code: '',
          name: ''
        },
        multipleSelection: []
      },
      tree: {
        treeData: [],
        treeCheckData: [],
        treeCheckIds: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      },
      hasAuthorities: []
    }
  },
  mounted: function () {
    this.fetch()
    fetch('/upms/role/getPermissionTree').then(res => {
      if (res.status === 200) {
        this.$message.success(res.message)
        this.tree.treeData = res.data.rows
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    /// table
    handleSizeChange () {},
    handleCurrentChange () {},
    handleSelectionChange (val) {
      this.table.multipleSelection = val
    },
    fetch (page = {
      page: 1,
      limit: 5
    }) {
      // Object.assign(page, this.table.cacheSearchData)
      fetch('/upms/role/page', page).then((res) => {
        if (res.status === 200) {
          this.table.tableData = res.data.rows
          this.table.pagination.total = res.data.total
          this.table.pagination.currentPage = page.page
          this.table.pagination.pageSize = page.limit
          this.$message(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    add () {
      // Object.assign(addData, this.table.addFields)
      /// 提交
      post('/upms/role/add', this.table.addFields).then(res => {
        if (res.status === 200) {
          this.$message(res.message)
          this.table.dialogVisible.addVisible = false
          let page = {
            limit: this.table.pagination.pageSize,
            page: this.table.pagination.currentPage
          }
          /// 将formData对象赋给page对象
          // Object.assign(page, formData)
          /// 模糊查询提交
          this.fetch(page)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    rem () {
      if (this.table.multipleSelection.length === 1) {
        del('/upms/role/delete/' + this.table.multipleSelection[0].id).then(res => {
          if (res.status === 200) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.warning('只能选择一行!')
      }
    },
    showAuth () {
      if (this.table.multipleSelection.length === 1) {
        this.table.dialogVisible.authVisible = true
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys([])
        }
      } else {
        this.$message.warning('只能选中一行!')
      }
    },
    getCheckedNodes () {
      console.log(this.$refs.tree.getCheckedNodes())
      let checkedNodes = this.$refs.tree.getCheckedNodes()
      let nodeIds = []
      checkedNodes.forEach(node => {
        nodeIds.push(node.id)
      })
      this.tree.treeCheckIds = nodeIds.join(',')
      console.log(this.tree.treeCheckIds)
      post('/upms/role/grantPermission', {
        roleId: this.table.multipleSelection[0].id,
        permissionIds: this.tree.treeCheckIds
      }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.table.dialogVisible.authVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getAuth () {
      fetch('/upms/role/getPermissionByRoleId', {roleId: this.table.multipleSelection[0].id}).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          if (res.data) {
            res.data.forEach(item => {
              this.tree.treeCheckData.push(item.id)
            })
          }
          console.log(this.tree.treeCheckData)
          console.log(this.$refs.tree)
          this.$refs.tree.setCheckedKeys(this.tree.treeCheckData)
          // this.tree.treeCheckData = res.data.rows === null ? [] : res.data.rows
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
